<template>
    <div>
        <div class="song-words">
            <div class="cover-section">
                <img class="album-cover" src="" alt="歌曲封面" />
            </div>
            <div class="lyrics-section">
                <div class="lyrics-content">
                    <!-- 歌词内容将在这里显示 -->
                    <p class="current-line">春风十里不如你</p>
                    <p>夏日炎炎思君切</p>
                    <p>秋叶飘零心如醉</p>
                    <p>冬雪纷飞情更深</p>
                    <p>岁月如歌唱不完</p>
                    <p>青春年华共追忆</p>
                    <p>山高水长情不变</p>
                    <p>天涯海角伴君行</p>
                    <p>月下花前诉衷肠</p>
                    <p>星河璀璨照我心</p>
                    <p>风起云涌思绪飞</p>
                    <p>雨打芭蕉听心声</p>
                    <p>江南烟雨朦胧美</p>
                    <p>塞北风光壮阔情</p>
                    <p>桃花依旧笑春风</p>
                    <p>梧桐叶落秋意浓</p>
                    <p>红尘滚滚情如海</p>
                    <p>白云悠悠载我梦</p>
                    <p>千山万水总是情</p>
                    <p>一生一世不相忘</p>
                    <p>花开花落又一年</p>
                    <p>云卷云舒心自闲</p>
                    <p>明月几时有把酒问青天</p>
                    <p>不知天上宫阙今夕是何年</p>
                    <p>我欲乘风归去又恐琼楼玉宇</p>
                    <p>高处不胜寒起舞弄清影</p>
                    <p>何似在人间转朱阁低绮户</p>
                    <p>照无眠不应有恨何事长向别时圆</p>
                    <p>人有悲欢离合月有阴晴圆缺</p>
                    <p>此事古难全但愿人长久</p>
                    <p>千里共婵娟相思相见知何日</p>
                    <p>此时此夜难为情入我相思门</p>
                    <p>知我相思苦长相思兮长相忆</p>
                    <p>短相思兮无穷极早知如此绊人心</p>
                    <p>何如当初莫相识玲珑骰子安红豆</p>
                    <p>入骨相思知不知山有木兮木有枝</p>
                    <p>心悦君兮君不知愿得一心人</p>
                    <p>白头不相离山无陵江水为竭</p>
                    <p>冬雷震震夏雨雪天地合</p>
                    <p>乃敢与君绝死生契阔与子成说</p>
                    <p>执子之手与子偕老两情若是久长时</p>
                    <p>又岂在朝朝暮暮金风玉露一相逢</p>
                    <p>便胜却人间无数柔情似水</p>
                    <p>佳期如梦忍顾鹊桥归路</p>
                    <p>如果两情相悦何必朝朝暮暮</p>
                    <p>一日不见如隔三秋思君不见下渝州</p>
                    <p>君住长江头我住长江尾</p>
                    <p>日日思君不见君共饮长江水</p>
                    <p>此水几时休此恨何时已</p>
                    <p>只愿君心似我心定不负相思意</p>
                    <p>愿君多采撷此物最相思</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style scoped>
.song-words {
    width: 300px;
    height: 525px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden; /* 防止整个容器出现滚动条 */
}

.cover-section {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.album-cover {
    width: 180px;
    height: 180px;
    object-fit: cover;
    background-color: #333;
    border: 1px solid #666;
}

.lyrics-section {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* 隐藏滚动条但保持滚动功能 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
}

.lyrics-section::-webkit-scrollbar {
    display: none; /* Chrome, Safari 和 Opera */
}

/* 为所有可能出现滚动条的元素添加隐藏样式 */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
}

*::-webkit-scrollbar {
    display: none; /* Chrome, Safari 和 Opera */
}

.lyrics-content {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    overflow-x: hidden;
    word-wrap: break-word;
}

.lyrics-content p {
    margin: 8px 0;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.lyrics-content p.current-line {
    opacity: 1;
    color: #00f7ff;
    font-weight: bold;
    transform: scale(1.1);
}
</style>